<template>
  <fks-dialog
    width="960px"
    :append-to-body="true"
    :visible.sync="show"
    @close="close"
  >
    <div slot="title">
      <i class="fks-icon-import" />
      <span style="margin-left: 8px">{{ LANG.IMPORT }}</span>
    </div>
    <fks-upload
      ref="upload"
      class="fun-upload"
      action=""
      drag
      name="file"
      :headers="{
        'Fawkes-Auth': ACESS_TOKEN
      }"
      :with-credentials="true"
      :auto-upload="false"
      :limit="1"
      accept=".json"
      :show-download="false"
      :file-list.sync="fileList"
      :http-request="importDic"
    >
      <i class="fks-icon-upload" />
      <div class="fks-upload__text">
        {{ LANG.DRAG_FILE_TIP }}
        <em>{{ LANG.CLICK_UPLOAD }}</em>
        <br />
        <span>{{ LANG.SUPPORT_FORMAT }}</span>
      </div>
    </fks-upload>
    <div slot="footer">
      <fks-button type="primary" icon="fks-icon-check" @click="importDone">
        {{ LANG.IMPORT }}
      </fks-button>
    </div>
  </fks-dialog>
</template>
<script>
import { importDic } from '../api'
export default {
  name: 'ImportDic',
  props: {
    importVisible: {
      type: Boolean,
      default: false
    },
    dicId: {
      type: String,
      default: ''
    },
    importType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: this.importVisible,
      ACESS_TOKEN: this.$storage.get('access_token'),
      fileList: []
    }
  },
  watch: {
    importVisible() {
      this.show = this.importVisible
    }
  },
  methods: {
    importDic(params) {
      let form = new FormData()
      form.append('file', params.file)
      if (this.importType == 'importDetail') {
        form.append('parentId', this.dicId)
      }
      importDic(form)
        .then((res) => {
          if (res.status) {
            this.$message.success(this.LANG.ADD_SUCCESS)
            this.$parent.initData()
          }
        })
        .catch(() => {})
    },
    importDone() {
      this.$refs.upload.submit()
      this.close()
    },
    close() {
      this.fileList = []
      this.show = false
      this.$emit('update:importVisible', this.show)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-upload-dragger {
  width: 895px;
}
</style>